<template>
  <el-dialog v-model="dialogVisible" width="60%" style="height: 250px" :close-on-click-modal="false" >
    <el-row :gutter="20" style="margin-bottom: 10px">
      <el-col :span="12">
        <div class="grid-content"  >
          <span class="label">Chute:</span>
          <el-input v-model="chuteAmount" style="width: 150px;"  ></el-input>
          <span style="margin-left: 10px;font-weight: bold">Unit</span>
          <el-tag
              :style="{
                marginLeft: '8px',
                backgroundColor: showRecommend.chute ? 'white' : 'transparent',
                color: showRecommend.chute ? 'orange' : 'transparent',
                borderColor: showRecommend.chute ? 'orange' : 'transparent',
                width: '50px',
                textAlign: 'center'
              }"
              size="small"
          >
            Recom
          </el-tag>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content"  >
          <span class="label">Parking Lot:</span>
          <el-input v-model="parkingAmount" style="width: 150px" @focus="hideRecommend('parking')"></el-input>
          <span style="margin-left: 10px;font-weight: bold">Unit</span>
          <el-tag
              :style="{
                marginLeft: '8px',
                backgroundColor: showRecommend.parking ? 'white' : 'transparent',
                color: showRecommend.parking ? 'orange' : 'transparent',
                borderColor: showRecommend.parking ? 'orange' : 'transparent',
                width: '50px',
                textAlign: 'center'
              }"
              size="small"
          >
            Recom
          </el-tag>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <div class="grid-content">
          <span class="label">Infeed Station:</span>
          <el-input v-model="dispatchAmount"   style="width: 150px" @focus="hideRecommend('dispatch')"></el-input>
          <span style="margin-left: 10px;font-weight: bold">Unit</span>
          <el-tag
              :style="{
                marginLeft: '8px',
                backgroundColor: showRecommend.dispatch ? 'white' : 'transparent',
                color: showRecommend.dispatch ? 'orange' : 'transparent',
                borderColor: showRecommend.dispatch ? 'orange' : 'transparent',
                width: '50px',
                textAlign: 'center'
              }"
              size="small"
          >
            Recom
          </el-tag>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content">
          <span class="label">Charger Qty:</span>
          <el-input v-model="chargePileAmount"  style="width: 150px" @focus="hideRecommend('chargePile')"></el-input>
          <span style="margin-left: 10px;font-weight: bold">Unit</span>
          <el-tag
              :style="{
                marginLeft: '8px',
                backgroundColor: showRecommend.chargePile ? 'white' : 'transparent',
                color: showRecommend.chargePile ? 'orange' : 'transparent',
                borderColor: showRecommend.chargePile ? 'orange' : 'transparent',
                width: '50px',
                textAlign: 'center'
              }"
              size="small"
          >
            Recom
          </el-tag>
        </div>
      </el-col>
    </el-row>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">Cancel</el-button>
        <el-button type="primary" @click="handleGo">Ok</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import {round} from "lodash-es";

const dialogVisible = ref(false);
const chuteAmount = ref<number>();
const parkingAmount = ref<number>();
const chargePileAmount = ref<number>();
const dispatchAmount = ref<number>();
const showRecommend = ref<any>({
  parking: false,
  dispatch: false,
  chargePile: false,
  chute: false
});


const emit = defineEmits(['go']);

const handleGo = () => {

  if (chuteAmount.value) {
    dialogVisible.value = false;
    emit('go', chuteAmount.value,parkingAmount.value,chargePileAmount.value,dispatchAmount.value);
  }

  //清空表单
  chuteAmount.value = undefined; //格口
  parkingAmount.value = undefined; //停车位
  dispatchAmount.value = undefined; //发包台
  chargePileAmount.value = undefined; //充电桩
};


const hideRecommend = (type: any) => {
  showRecommend.value[type] = false;
};



defineExpose({
  openDialog(row: any) {
    if (row.perHour != null) {
      parkingAmount.value = round(row.perHour / 50);
      dispatchAmount.value = round(row.perHour / 800)
      chargePileAmount.value = round(parkingAmount.value / 10)
      if (row.perHour <= 400) {
        chuteAmount.value = 40;
      } else if (row.perHour <= 800) {
        chuteAmount.value = 60;
      } else if (row.perHour <= 1200) {
        chuteAmount.value = 80;
      } else if (row.perHour <= 2000) {
        chuteAmount.value = 96;
      } else if (row.perHour <= 3000) {
        chuteAmount.value = 120;
      } else if (row.perHour <= 5000) {
        chuteAmount.value = 160;
      } else if (row.perHour <= 8000) {
        chuteAmount.value = 200;
      } else {
        chuteAmount.value = 240;
      }

      showRecommend.value = {
        parking: true,
        dispatch: true,
        chargePile: true,
        chute: true
      }
    }
    dialogVisible.value = true;
  }
});
</script>

<style scoped>
.grid-content {
  display: flex;
  align-items: center;
  margin-bottom: 20px;

  .label {
    width: 100px;
    margin-right: 10px;
    font-weight: bold;
  }

}
.labelchute {
  width: 95px;
  margin-right: 1px;
  font-weight: bold;
}
</style>
